<script setup lang="ts">
import type { TenantItem } from '#/api/tenant';

import { computed, onMounted, ref } from 'vue';

import { Card, Col, Descriptions, Row, Spin, Tag } from 'ant-design-vue';

import { tenantApi } from '#/api/tenant';

interface Props {
  id?: string;
  data?: TenantItem;
}

const props = defineProps<Props>();

defineOptions({
  name: 'TenantDetail',
});

// 响应式数据
const loading = ref(false);
const tenantData = ref<TenantItem | null>(null);

// 计算属性
const statusColor = computed(() => {
  return tenantData.value?.is_active ? 'success' : 'error';
});

const statusText = computed(() => {
  return tenantData.value?.is_active ? '启用' : '禁用';
});

const expireStatus = computed(() => {
  if (!tenantData.value?.expire_at) return null;
  
  const expireDate = new Date(tenantData.value.expire_at);
  const now = new Date();
  
  if (expireDate < now) {
    return { color: 'error', text: '已过期' };
  } else if (expireDate.getTime() - now.getTime() < 7 * 24 * 60 * 60 * 1000) {
    return { color: 'warning', text: '即将过期' };
  } else {
    return { color: 'success', text: '正常' };
  }
});

// 格式化时间
const formatDateTime = (dateString: string) => {
  return new Date(dateString).toLocaleString('zh-CN');
};

// 获取租户详情
const fetchTenantDetail = async () => {
  if (!props.id) return;
  
  loading.value = true;
  try {
    const result = await tenantApi.getDetail(props.id);
    tenantData.value = result;
  } catch (error) {
    console.error('获取租户详情失败:', error);
  } finally {
    loading.value = false;
  }
};

// 初始化数据
const initData = () => {
  if (props.data) {
    tenantData.value = props.data;
  } else if (props.id) {
    fetchTenantDetail();
  }
};

// 组件挂载时初始化数据
onMounted(() => {
  initData();
});
</script>

<template>
  <div class="tenant-detail">
    <Spin :spinning="loading">
      <Card title="租户详情" v-if="tenantData">
        <Row :gutter="[16, 16]">
          <!-- 基本信息 -->
          <Col :span="24">
            <Card type="inner" title="基本信息" size="small">
              <Descriptions :column="2" bordered>
                <Descriptions.Item label="租户名称">
                  {{ tenantData.name }}
                </Descriptions.Item>
                <Descriptions.Item label="租户编码">
                  <code>{{ tenantData.code }}</code>
                </Descriptions.Item>
                <Descriptions.Item label="域名">
                  {{ tenantData.domain || '-' }}
                </Descriptions.Item>
                <Descriptions.Item label="状态">
                  <Tag :color="tenantData.is_active ? 'green' : 'red'">
                    {{ tenantData.is_active ? '启用' : '禁用' }}
                  </Tag>
                </Descriptions.Item>
                <Descriptions.Item label="最大用户数">
                  {{ tenantData.max_users }}
                </Descriptions.Item>
                <Descriptions.Item label="过期状态" v-if="expireStatus">
                  <Tag :color="expireStatus.color">
                    {{ expireStatus.text }}
                  </Tag>
                </Descriptions.Item>
              </Descriptions>
            </Card>
          </Col>

          <!-- 时间信息 -->
          <Col :span="24">
            <Card type="inner" title="时间信息" size="small">
              <Descriptions :column="2" bordered>
                <Descriptions.Item label="创建时间">
                  {{ formatDateTime(tenantData.created_at) }}
                </Descriptions.Item>
                <Descriptions.Item label="更新时间">
                  {{ formatDateTime(tenantData.updated_at) }}
                </Descriptions.Item>
                <Descriptions.Item label="过期时间" :span="2">
                  {{ tenantData.expire_at ? formatDateTime(tenantData.expire_at) : '永不过期' }}
                </Descriptions.Item>
              </Descriptions>
            </Card>
          </Col>

          <!-- 系统信息 -->
          <Col :span="24">
            <Card type="inner" title="系统信息" size="small">
              <Descriptions :column="2" bordered>
                <Descriptions.Item label="租户ID">
                  <code>{{ tenantData.id }}</code>
                </Descriptions.Item>
                <Descriptions.Item label="数据库状态">
                  <Tag color="success">正常</Tag>
                </Descriptions.Item>
                <Descriptions.Item label="存储使用">
                  <span class="text-gray-500">暂无数据</span>
                </Descriptions.Item>
                <Descriptions.Item label="当前用户数">
                  <span class="text-gray-500">暂无数据</span>
                </Descriptions.Item>
              </Descriptions>
            </Card>
          </Col>
        </Row>
      </Card>
      
      <div v-else class="text-center py-8 text-gray-500">
        暂无数据
      </div>
    </Spin>
  </div>
</template>

<style scoped>
.tenant-detail {
  padding: 16px;
}

:deep(.ant-descriptions-item-label) {
  font-weight: 500;
  background-color: #fafafa;
}

:deep(.ant-descriptions-item-content) {
  background-color: #fff;
}

:deep(.ant-card-head-title) {
  font-size: 16px;
  font-weight: 600;
}

code {
  background-color: #f5f5f5;
  padding: 2px 6px;
  border-radius: 4px;
  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
  font-size: 12px;
}
</style>